<template>
  <div class="container">
    <div style="background-color: #2758bb">
      <nav-bar subTitle="态势感知">
        <template #navBar>
          <bar-box :tableData="tableData"></bar-box>
        </template>
      </nav-bar>
    </div>
    <div style="padding: 20px">
      <el-row :gutter="20">
        <template v-for="item in tableData">
          <el-col :span="6">
            <div class="ts-box" :class="item.name === actionName?'active':''" @click="setActionName(item.name)">
              <div>{{ item.title }}</div>
              <div>
                <small>截止时间2025-05-21</small> <span>已更新</span>
              </div>
            </div>
          </el-col>
        </template>
      </el-row>
    </div>
    <template v-if="actionName === 'overview'">
     <overview-of-the-situation></overview-of-the-situation>
    </template>
    <template v-else-if="actionName === 'forecast'">
      <business-forecast></business-forecast>
    </template>
    <template v-else-if="actionName === 'warning'">
      <light-up-warning></light-up-warning>
    </template>
    <template v-else-if="actionName === 'analysis'">
     <economic-benefit-analysis></economic-benefit-analysis>
    </template>
  </div>
</template>

<script setup>
import NavBar from "@/components/navBar.vue";
import {ref,  watchEffect} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import BarBox from "@/components/barBox.vue";
import {navData} from './data/data.js'
import OverviewOfTheSituation from "@/views/situationalAwareness/components/OverviewOfTheSituation.vue";
import BusinessForecast from "@/views/situationalAwareness/components/BusinessForecast.vue";
import LightUpWarning from "@/views/situationalAwareness/components/LightUpWarning.vue";
import EconomicBenefitAnalysis from "@/views/situationalAwareness/components/EconomicBenefitAnalysis.vue";

const tableData = ref(navData)
const route = useRoute()
const router = useRouter()
const actionName = ref('warning')

watchEffect(function () {
  actionName.value = route.query.type
})

const setActionName = (name) => {
  router.push({path: '/situationalAwareness/manage', query: {type: name}})
}


</script>

<style scoped lang="scss">
.container {
  background-color: #ffffff;
}

.body {
  box-sizing: border-box;
  padding: 15px;
  background-color: #ffffff;
}

.ts-box {
  height: 80px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f7f8fa;

  > div:first-child {
    font-size: 20px;
  }

  > div:last-child {
    color: #666666;
    font-size: 14px;

    > span {
      padding: 2px 5px;
      border: 1px solid #cccccc;
      background-color: #ffffff;
    }
  }

  &.active,
  &:hover {
    background-color: #eaf1ff;
    position: relative;

    > div:first-child {
      color: #1e87f0;
      font-weight: bold;
    }
  }

  &.active:after,
  &:hover:after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: calc(50% - 10px);
    width: 20px;
    height: 20px;
    background-color: #eaf1ff;
    transform: rotate(45deg);
    transform-origin: center;
  }
}

</style>
